<template>
  <div id="app">
    <!-- 计划列表 -->
    <!-- <MyTitle></MyTitle>
    <MyHeader :addTd="addTd"></MyHeader>
    <List 
    :todoArr="todoArr" 
    :checkTodo="checkTodo"
    :delTodo="delTodo"
    ></List>
    <MyFooter 
    :todoArr="todoArr"
    :checkAll="checkAll"
    :clearDone="clearDone"
    ></MyFooter> -->


    <!-- 默认插槽，列表分类 -->
    <!-- <Category></Category>
    <Category></Category>
    <Category></Category>
    <Category></Category> -->

    <!-- tree 自封 -->
    <!-- <hhztree :list="data"></hhztree> -->

    <!-- element-ui tree封装 -->
    <eletree></eletree>

    <inss></inss>
    <!-- element 封装滚动表格 -->
    <tablegd></tablegd>
  </div>
</template>

<script>
// 计划列表插件
// import MyHeader from './components/MyHeader.vue';
// import List from './components/List.vue';
// import MyFooter from './components/MyFooter.vue'
// import MyTitle from './components/MyTitle.vue'

// 插槽插件
import Category from './components/Self/Category.vue'
// 自封tree组件
import hhztree from './components/Tree/hhztree.vue'
// element-ui
import eletree from './components/Tree/ele1tree.vue'

// 动态表格
import tablegd from './components/Self/tablegd.vue'

import inss from './components/Self/ind.vue'


export default {
  name: "App",
  components: {
    //计划列表插件
    // MyHeader,
    // List,
    // MyFooter,
    // MyTitle

    Category,
    hhztree,
    eletree,
    tablegd,
    inss
  },
  data() {
    return {
      // 任务数据:通过本地存储来实现数据稳定新
      todoArr: JSON.parse(localStorage.getItem('todoArr')) || [],
      // [
          // {
          //     id: '001',
          //     title: '吃饭',
          //     done: false
          // },{
          //     id: '002',
          //     title: '工作',
          //     done: false
          // },{
          //      id: '003',
          //     title: '睡觉',
          //     done: false
          // }
      // ]

      // tree数据
      data: [
                    {
                        label: 'aaa',
                        isChecked: false,
                        children:[
                            {
                                label: 'aaa-1',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'aaa-1-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'aaa-1-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            {
                                label: 'aaa-2',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'aaa-2-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            {
                                label: 'aaa-3',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'aaa-3-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'aaa-3-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'aaa-3-3',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            
                        ]
                    },
                    {
                        label: 'bbb',
                        isChecked: false,
                        children:[
                            {
                                label: 'bbb-1',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'bbb-1-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            {
                                label: 'bbb-2',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'bbb-2-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'bbb-2-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        label: 'ccc',
                        isChecked: false,
                        children:[
                            {
                                label: 'ccc-1',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'ccc-1-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'ccc-1-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            {
                                label: 'ccc-2',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'ccc-2-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'ccc-2-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'ccc-2-3',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                            {
                                label: 'ccc-3',
                                isChecked: false,
                                children:[
                                    {
                                        label: 'ccc-3-1',
                                        isChecked: false,
                                        children:[]
                                    },
                                    {
                                        label: 'ccc-3-2',
                                        isChecked: false,
                                        children:[]
                                    },
                                ]
                            },
                        ]
                    },
                ]
    }
  },
  methods: {
    addTd(todoObj){
      if(todoObj){
        this.todoArr.unshift(todoObj);
      }
    },
    // 勾选还是没有勾选？
    checkTodo(id){
      this.todoArr.forEach(item => {
        if(id === item.id){
          item.done = !item.done;
        }
      });
    },
    // 删除任务
    delTodo(id){
      this.todoArr = this.todoArr.filter(item => {
        return item.id !== id;
      })
    },
    // 全选或者全不选
    checkAll(done){
      this.todoArr.forEach(item => {
        item.done = done;
      });
    },
    // 清除已经完成的
    clearDone(){
      this.todoArr = this.todoArr.filter(item => {
        return !item.done
      })
    }
  },
  watch:{
    // 通过webstorage来进行浏览器本地存储 => 下面这种监视是普通监视，不能监视对象的属性，
    // 想要能够监视对象中的属性的话，需要使用深度监视，比如使用对象形式的监视
    // 
    // todoArr(value){
    //   localStorage.setItem('todoArr',JSON.stringify(value));
    // }

    // 深度监视
    todoArr:{
      deep: true,
      handler(value){
        localStorage.setItem('todoArr',JSON.stringify(value));
      }
    }
  }
};
</script>

<style scoped>
#app {
  background: linear-gradient(top,right,rgb(63, 4, 63),#aaa);
  /* // 计划列表 */
  width: 500px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0 10px 0;
  border-radius: 4px;
  border: 1px solid rgb(202, 172, 182);
  background: #999;

  /* // 插槽组件 */
  width: 1000px;
  height: 800px;
  border-radius: 4px;
  border: 1px solid rgb(202, 172, 182);
  display: flex;
  justify-content: space-around;
}
</style>
